<template style="display: flex; justify-content: center">
  <div
    id="cityChart"
    style="width: 100%; height: 100%; margin-left: 10px"
  ></div>
</template>

<script>
import * as echarts from "echarts";
import "echarts-gl";
import liaoChengJson from "@/utils/city-infoJson/liaoCheng.json";
import { rgb } from "chalk";

export default {
  name: "index",
  data() {
    return {
      cityChart: "",
    };
  },
  mounted() {
    this.renderMap();
  },
  methods: {
    renderMap() {
      let that = this;
      const echartsConDom = document.getElementById("cityChart");
      const myChart = echarts.init(echartsConDom); // 初始化
      echarts.registerMap("liaochengMap", liaoChengJson);

      myChart.setOption({
        tooltip: {
          show: false,
        },
        series: [
          {
            type: "map3D",
            map: "liaochengMap",
            itemStyle: {
              color: "#529dff", // 背景颜色
              opacity: 1,
              borderWidth: 0.6,
              borderColor: "#fff",
            },
            top: -80,
            left: -220,
            width: "110%",
            height: "110%",
            regionHeight: 5,
            shading: "realistic",
            label: {
              show: true,
              color: "#ffffff",
              fontSize: 12,
              fontWeight: 500,
              opacity: 1,
            },
            viewControl: {
              autoRotate: false,
              rotateSensitivity: 2,
              distance: 100,
              minDistance: 130,
              maxDistance: 130,
            },
            emphasis: {
              itemStyle: {
                color: "rgba(0,157,255,0.7)",
              },
            },
            data: [
              { name: "阳谷县", itemStyle: { color: "#359fe4" } },
              { name: "莘县", itemStyle: { color: "#2184ca" } },
              { name: "东昌府区", itemStyle: { color: "#58aef0" } },
              { name: "冠县", itemStyle: { color: "#568bc5" } },
              { name: "东阿县", itemStyle: { color: "#78caff" } },
              { name: "茌平区", itemStyle: { color: "#5199ef" } },
              { name: "高唐县", itemStyle: { color: "rgba(102,168,250)" } },
              { name: "临清市", itemStyle: { color: "#5199ef" } },
            ],
          },
        ],
      });
      myChart.on("click", function (value) {
        that.$emit("mapClick", value.name);
      });
    },
  },
};
</script>

<style scoped lang="scss"></style>
